| RecoilJS RecoilRoot在ThreeJS画布中不可访问 | 您所在的位置：网站首页 › react viewer › RecoilJS RecoilRoot在ThreeJS画布中不可访问 |
|
希望有人能帮我。我对RecoilJS很陌生，所以如果我遗漏了一些明显的东西，请告诉我。 我正在尝试用RecoilJS原子来管理场景中的3D对象的状态。我有一个原子的最后一个项目，鼠标盘旋在上面，我想显示一个调试面板及其信息。由于某些原因，RecoilRoot提供者似乎无法从ThreeJS画布中访问。 在查看器(下面的代码)中，当我试图声明This component must be used inside a component时，会收到一个错误警告：const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom); (下面是完整的跟踪) 但是，从父(查看器)传递setHoveredLEDAtom是可行的。 在Debug中声明它也有效，这是一个共享相同上下文的画布兄弟。 就目前而言，这是好的，但整个后退的意义是停止通过道具上下。 我是遗漏了一些显而易见的东西，还是ThreeJS画布以某种方式存在于不同的范围内。 如有任何指示，将不胜感激。 index.js const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // //App.js function App() { return ( ); }查看器 const LED = ({ led }) => { const [hovered, setHoevered] = useState(false); const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom); const handleHoverEnter = () => { setHoveredLEDAtom(led); setHoevered(true); }; const handleHoverExit = () => { setHoevered(false); }; return ( handleHoverEnter()} onPointerOut={(event) => handleHoverExit()} > 125 ? "hotpink" : "grey"} /> ); };const Debug = () => { const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom); return ( member : {hoveredLED.member} ); };const Viewer = () => { const [model, setModel] = useRecoilState(modelAtom); const [hoveredLED, setHoveredLEDAtom] = useRecoilState(hoveredLEDAtom); useEffect(() => { console.log(hoveredLED); }, [hoveredLED]); return ( {model.map((led, index) => { const key = `led-${index}`; return ( ); })} ); }; export default Viewer;错误 995 react-reconciler.development.js:9747 The above error occurred in the component: at LED (http://localhost:3000/static/js/bundle.js:205:5) at Suspense at ErrorBoundary (http://localhost:3000/static/js/bundle.js:1998:5) at Provider (http://localhost:3000/static/js/bundle.js:3860:5) React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ react-reconciler.development.js:9747 2 react-three-fiber.esm.js:141 Uncaught Error: This component must be used inside a component. at err (recoil.js:16:1) at Object.notInAContext (recoil.js:4092:1) at updateRetainCount (recoil.js:3255:1) at useRetain_ACTUAL (recoil.js:4669:1) at useRetain (recoil.js:4627:1) at useRecoilValueLoadable (recoil.js:5234:1) at useRecoilValue (recoil.js:5258:1) at useRecoilState (recoil.js:5306:1) at LED (Viewer.js:76:1) at renderWithHooks (react-reconciler.development.js:7363:1) react-dom.development.js:18525 The above error occurred in the component: at Canvas (http://localhost:3000/static/js/bundle.js:4179:5) at Viewer (http://localhost:3000/static/js/bundle.js:325:83) at div at App at RecoilRoot_INTERNAL (http://localhost:3000/static/js/bundle.js:91093:5) at RecoilRoot (http://localhost:3000/static/js/bundle.js:91259:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18525 react-dom.development.js:26740 Uncaught Error: This component must be used inside a component. at err (recoil.js:16:1) at Object.notInAContext (recoil.js:4092:1) at updateRetainCount (recoil.js:3255:1) at useRetain_ACTUAL (recoil.js:4669:1) at useRetain (recoil.js:4627:1) at useRecoilValueLoadable (recoil.js:5234:1) at useRecoilValue (recoil.js:5258:1) at useRecoilState (recoil.js:5306:1) at LED (Viewer.js:76:1) at renderWithHooks (react-reconciler.development.js:7363:1) three.module.js:26599 THREE.WebGLRenderer: Context Lost. |
| CopyRight 2018-2019 实验室设备网 版权所有 |